<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>upload_test</title>
    <style>
        .upload {
            display: inline-block;
            padding: 10px;
            background-color: brown;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left:0;
            z-index: 90;
        }
        .file {
            display: inline-block;
            padding: 10px;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left:0;
            z-index: 100;
            opacity: 0;
        }
    </style>
</head>
<body>
    <div style="position: relative;width: 100px;height: 50px;">
    <input class="file" type="file" id="fafa" name="fafa">
    <a class="upload">上传</a>
    </div>
    <input type="button" value="提交XHR" onclick="xhrSubmit();">
    <input type="button" value="提交jQuery" onclick="jqSubmit();">
    <hr>
    <form id="fm1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
        <iframe id="ifm1" name="ifm1" style="display: none;">
        </iframe>
        <input type="file" name="fafa" onchange="changeUpload();">
{#        <input type="submit" onclick="iframeSubmit();" value="iframe提交"> #}
    </form>
    <div id="preview"></div>
    <script src="/static/js/jquery-1.12.4.js"></script>
    <script>
        function changeUpload() {
            $('#ifm1').load(function () {
                var text = $('#ifm1').contents().find('body').text();
                var obj = JSON.parse(text);

                $('#preview').empty();
                var imgTag = document.createElement('img');
                imgTag.src = "/" + obj.data;
                $('#preview').append(imgTag);
            });
            $('#fm1').submit();
        }
        function iframeSubmit() {
            $('#ifm1').load(function () {
                var text = $('#ifm1').contents().find('body').text();
                var obj = JSON.parse(text);

                var imgTag = document.createElement('img')
                imgTag.src = "/" + obj.data
                $('#preview').append(imgTag)
                console.log(obj);
            })
        }
        function jqSubmit() {
            var file_obj = document.getElementById("fafa").files[0];

            var fd = new FormData();
            fd.append('username','root');
            fd.append('fafa',file_obj);

            $.ajax({
                url: "/upload_file/",
                type: "POST",
                data: fd,
                processData: false,
                contentType: false,
                success: function (arg, a1, a2) {
                    console.log(arg);
                    console.log(a1);
                    console.log(a2);
                }
            })
        }
        
        function xhrSubmit() {
            var file_obj = document.getElementById("fafa").files[0];
            var fd = new FormData();
            fd.append('username','root');
            fd.append('fafa',file_obj);

            var xhr = new XMLHttpRequest();
            xhr.open('POST','/upload_file/');
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    var obj = JSON.parse(xhr.responseText);
                    console.log(obj);
                }
            };
            {#xhr.setRequestHeader('k1','v1');#}
            {#xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset-UTF-8;');#}
            xhr.send(fd);
        }
    </script>
</body>
</html>